<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Field</title>
    <style>
      html,
      body {
        margin: 0;
        height: 100%;
        display: grid;
        place-content: center;
        background: aliceblue;
      }
      field {
        /* <bg-size> 只能紧接着 <bg-position> 出现，以"/"分割，如： "center/80%". */
        --中线: linear-gradient(#fff, #fff) center/2px 100% no-repeat;  /* bg-image bg-position/bg-size bg-repeat */
        --中圈: radial-gradient(
            closest-side circle,
            #fff 2px,
            transparent 0 calc(100% - 2px),
            #fff 0 100%,
            transparent 0
          )
          center/20em 20em no-repeat; /* bg-image bg-position/bg-size bg-repeat */
        /* --大禁区: linear-gradient(#43A63C, #43A63C) left center/calc(18em - 2px) calc(44em - 4px) no-repeat, linear-gradient(#fff, #fff) left center/18em 44em no-repeat; */
        --大禁区: linear-gradient(
              to right,
              #43a63c calc(18em - 2px),
              transparent 0
            )
            0 center/calc(100% - 18em + 2px) calc(44em - 4px) repeat-x, /* bg-image bg-position/bg-size bg-repeat */
          linear-gradient(to right, #fff 0 18em, transparent 18em 0) 
          0 center/calc(100% - 18em) 44em repeat-x; /* bg-image bg-position/bg-size bg-repeat */
        /* --小禁区: linear-gradient(
              to right,
              #43a63c calc(9em - 2px),
              transparent 0
            )
            0 center/calc(100% - 9em + 2px) calc(22em - 4px) repeat-x,
          linear-gradient(to right, #fff 9em, transparent 0) 0
            center/calc(100% - 9em) 22em repeat-x; */
        --小禁区: linear-gradient(
              to right,
              #43a63c calc(6em - 2px),
              transparent 0
            )
            0 center/calc(100% - 6em + 2px) calc(20em - 4px) repeat-x,
          linear-gradient(to right, #fff 6em, transparent 0) 0
            center/calc(100% - 6em) 20em repeat-x;
        --球门: linear-gradient(
              to right,
              #43a643 calc(3em - 4px),
              transparent 0
            )
            calc(-3em + 2px) center/calc(100% + 3em) calc(8em - 4px) repeat-x,
          linear-gradient(to right, #fff 3em, transparent 0) -3em center/calc(
              100% + 3em
            ) 8em repeat-x;
        --罚球弧: radial-gradient(
            circle at 12em center,
            transparent calc(10em - 2px),
            #fff 0 10em,
            transparent 0
          )
          0 center/calc(100% - 24em) 100%;
        --罚球点: radial-gradient(
            circle at 12em center,
            #fff 2px,
            transparent 0
          )
          0 center/calc(100% - 24em) 100%;
        /* --角球弧: radial-gradient(circle at 1em 1em, transparent calc(1em - 2px), #fff 0 1em,transparent 0) - 1em - 1em/100% 100%; */
        --角球弧: radial-gradient(
            circle at 1em 1em,
            transparent calc(1em - 2px),
            #fff 0 1em,
            transparent 0
          ) -1em -1em/100% 100% content-box;
        --草坪: linear-gradient(
            to right,
            transparent 50%,
            rgba(0, 0, 0, 0.4) 0% 100%
          )
          center/10% 100%;
        font-size: 5px;
        width: 115em;
        height: 74em;
        border: 5em solid transparent;
        outline: 2px solid #fff;
        outline-offset: -5em;
        background: var(--草坪), var(--角球弧), var(--罚球点), var(--球门),
          var(--小禁区), var(--大禁区), var(--罚球弧), var(--中线), var(--中圈),
          #43a63c; /* 前面的会覆盖后面的 */
        background-blend-mode: soft-light, normal, normal, normal, normal,
          normal, normal, normal, normal, normal, normal, normal;
      }
    </style>
  </head>
  <body>
    <field></field>
  </body>
</html>
